import Icon from '@/components/Icon';
import { ReactNode } from 'react';
import { useHistory } from 'react-router-dom';
import styles from './index.module.scss';
import classnames from 'classnames';

// 1,定义类型
type NavBarProps = {
  onBack?: () => void;
  right?: ReactNode;
  children?: ReactNode;
  fixed?: boolean;
};

// { onBack, children, right }

export default function NavBar({
  onBack,
  children,
  right,
  fixed,
}: NavBarProps) {
  const history = useHistory();
  const handleBack = () => {
    // 如果有指定  就返回指定传进来的
    if (onBack) {
      return onBack();
    }

    //默认返回
    history.goBack();
  };

  return (
    <div className={styles.root}>
      <div className={classnames('main', { fixed: fixed })}>
        {/* 后退按钮 */}
        <div className="left">
          <Icon type="iconfanhui" onClick={handleBack} />
        </div>
        {/* 居中标题 */}
        <div className="title">{children}</div>
        {/* 右侧内容 */}
        <div className="right">{right}</div>
      </div>
    </div>
  );
}
